<template>
	<div class="banner_list table-theme">
		<el-card>
			<div class="banner-top-menu">
				<div class="banner-menu-left">
                    <div class="all-check"><el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox></div>
					<div class="sort-view">
						<el-select v-model="ase" placeholder="选择排序" @change="init(1)">
							<el-option v-for="item in sortList" :key="item.value" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</div>
					<div class="client-view">
						<el-select v-model="client" placeholder="选择类型" @change="init(1)">
							<el-option v-for="item in clientList" :key="item.value" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</div>
				</div>

				<div class="banner-menu-right">
					<refresh-button @refresh="refreshPage"></refresh-button>
				</div>
			</div>
			<p style="text-align: right;line-height: 30px;">总轮播图数：{{ total }}</p>
            <div class="goods-list">
                <div class="goods-item" v-for="(item, index) in bannerList" :key="index">
                    <div class="goods-checkbox"><el-checkbox v-model="item.checkbox" :disabled="item.disabled" @change="onDelCheckbox(item.id)"></el-checkbox></div>
                    <div class="goods-content" @click="checkboxClick(item)">
                        <ImgPopover style="margin-top: 5px;" :src="item.image"></ImgPopover>
                        <div class="text-info">
                            <p class="goods-sn">类型：{{ item.client }}</p>
                            <p class="add-time">添加时间：{{ item.add_time }}</p> 
                        </div>
                    </div>
                </div>
            </div>
			<div class="pages"><el-pagination background layout="prev, pager, next, jumper" :total="total" @current-change="init" :current-page="page"></el-pagination></div>
            <div style="padding: 20px 10px;">
                <el-button @click="cancel()">取 消</el-button>
                <el-button type="primary" @click="addFabricClick">确 定</el-button>
            </div>
		</el-card>
	</div>
</template>

<script>	
import ImgPopover from '@/components/ImgPopover';
export default {
    props: {
        layerid: {
			type: String,
			default: ''
        },
        shelf_id: {
			type: Number,
			default: 0
		},
		goods_type: {
			type: Number,
			default: 0
		}
    },
	components: {
		ImgPopover
	},
	data() {
		return {
			bannerList: [],
			total: 0,
			ase: '',
			client: '',
			sortList: [
				{
					value: 1,
					label: '升序'
				},
				{
					value: 2,
					label: '降序'
				}
			],
			clientList: [
				{
					value: 1,
					label: 'APP'
				},
				{
					value: 2,
					label: '小程序'
				},
				{
					value: 3,
					label: 'PC商城'
				},
				{
					value: 4,
					label: '公众号'
				},
				{
					value: 5,
					label: 'B端咨询'
				},
				{
					value: 7,
					label: 'B端招商轮播图'
				},
				{
					value:9,
					label:'家配大师'
				},
				{
					value: 8,
					label: '默认'
				}
			],
            page: 0,
            checkAll:false,
			bannerCheckboxList:[],//保留选中
			allLength:0,
			bannerDisabledList:[]//回显已选中不给
		};
	},
	methods: {
		// 初始化列表
		init(e) {
			this.page = e;
			let data = {
				page: e - 1 ? e - 1 : 0,
				limit: 10,
				order_by: 'sort',
				asc: this.ase,
				client: this.client,
				store_id: localStorage.getItem('store_id')
			};
			this.onPushData();
			this.onSetData();
			this.$http(this.$ApiList.bannerList, data).then(res => {
				this.bannerList = [];
				res.datas.forEach(item => {
					if (item.client == 1) {
						item.client = 'APP';
					} else if (item.client == 2) {
						item.client = '小程序';
					} else if (item.client == 3) {
						item.client = 'PC商城';
					} else if (item.client == 5) {
						item.client = 'B端咨询';
					} else if (item.client == 4) {
						item.client = '公众号';
					}else if (item.client == 6) {
						item.client = '商户主页';
					}else if (item.client == 7) {
						item.client = 'B端招商轮播图';
					}else if (item.client == 8) {
						item.client = '默认';
					}
					item.checkbox = false;
					item.disabled = false;
					this.bannerList.push(item);
				});
				this.onSelectState();
				this.onSetEcho();
				this.total = res.counts;
				if(this.allLength === 10){
					this.checkAll = true;
				}else{
					this.checkAll = false;
				}
			});
		},
		refreshPage() {
			this.page = 1;
			this.ase = '';
            this.client = '';
            this.checkAll = false
			this.init(1);
        },
        checkboxClick(item) {
			if(item.disabled){
				this.$message.error('此轮播图已关联,请勿重复操作！');
				return false;
			}
			if (item.checkbox) {
				item.checkbox = false;
			} else {
				item.checkbox = true;
			}
        },
        cancel() {
			this.$layer.close(this.layerid);
        },
        handleCheckAllChange() {
			if (this.checkAll) {
				this.bannerList.forEach(item => {
					item.checkbox = true;
				});
			} else {
				this.bannerList.forEach(item => {
					if(!item.disabled){
						item.checkbox = false;
						this.onDelCheckbox(item.factory_id);
					}
				});
			}
        },
        addFabricClick(){
            this.onPushData();
			this.onSetData();
            if(!this.bannerCheckboxList.length){
                this.$layer.msg('至少选择一个');
                return;
            }
            let data = {
                shelf_id:this.shelf_id,
                goods_type:this.goods_type,
                goods_ids:this.bannerCheckboxList.join(',')
            };
            this.$http(this.$ApiList.ShelfGoodsAdd,data).then(res=>{
                this.$layer.msg(res.datas);
                this.init();
                this.checkAll = false;
                this.$parent.init();
				this.$layer.close(this.layerid);
            })
        },
		// 添加选中的数据
		onPushData(){
			this.bannerList.forEach(item => {
				if (item.checkbox) {
					this.bannerCheckboxList.push(item.id);
				}
			});
		},
		// 保留已选中的状态
		onSelectState(){
			let allLength = 0
			if(this.bannerCheckboxList.length){
				this.bannerList = this.bannerList.map(item=>{
					this.bannerCheckboxList.forEach(data=>{
						if(item.id == data){
							this.$set(item,'checkbox',true);
							allLength ++
						}
					})
					return item;
				})
			}
			this.allLength = allLength;
		},
		// 保留的数据去重
		onSetData(){
			if(this.bannerCheckboxList.length){
				this.bannerCheckboxList = Array.from(new Set(this.bannerCheckboxList));
			}
		},
		onDelCheckbox(goods_id){
			this.bannerCheckboxList.forEach((data,index)=>{
				if(data == goods_id){
					this.bannerCheckboxList.splice(index,1);
				}
			})
		},
		// 打开后回显
		initSelect(){
			let data = {
				page:0,
				shelf_id:this.shelf_id,
				goods_type:this.goods_type,
				order_by:"shelf_goods_id",
				asc:2,
				limit:100
			}
			this.bannerDisabledList = [];
			this.$http(this.$ApiList.ShelfGoodsList, data).then(res => {
				res.datas.data.forEach(item=>{
					this.bannerDisabledList.push(item.goods_id)
				})
			}).then(()=>{
				this.init();
			})
		},
		onSetEcho(){
			if(this.bannerDisabledList.length){
				this.bannerList.forEach(item=>{
					this.bannerDisabledList.forEach(data=>{
						if(item.id == data){
							this.$set(item,'checkbox',true);
							this.$set(item,'disabled',true);
						}
					})
				})
			}
		}
	},
	created() {
		this.initSelect();
	}
};
</script>
<style lang="scss" scoped>
.banner_list{
	width: 100%;
}
.banner_list .banner-top-menu {
	display: flex;
}

.banner-menu-left {
	flex: 1;
	display: flex;
}
.banner-menu-right {
	flex: 1;
	display: flex;
	flex-direction: row-reverse;
}


.banner-top-menu .add,
.banner-top-menu .sort-view {
	margin-right: 10px;
}

.banner-top-menu .sort-view,
.banner-top-menu .client-view {
	width: 150px;
}
.all-check {
			margin-right: 10px;
			display: flex;
			justify-content: center;
			align-items: center;
		}
.goods-list {
		padding: 10px 0;
		display: flex;
		flex-wrap: wrap;
		.goods-checkbox {
			width: 16px;
			margin-right: 10px;
			display: flex;
			justify-content: center;
			align-items: center;
			box-sizing: border-box;
		}
		.goods-item {
			padding: 15px 10px;
			margin-top: 10px;
			margin-right: 10px;
			display: flex;
			width: 370px;
			height: 140px;
			box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
			border-radius: 4px;
			cursor: pointer;
			box-sizing: border-box;
			.goods-content {
				display: flex;
				.img-popover img {
					width: 100px !important;
					height: 100px !important;
				}
			}
		}
	}
.text-info {
		width: 210px;
		margin-left: 10px;
		.goods-name,
		.goods-sn {
			line-height: 30px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		.add-time{
			line-height: 30px;
		}
	}
	.text-bottom {
		display: flex;
		line-height: 30px;
	}
	.text-bottom p {
		flex: 1;
	}
</style>
